<template>
  <div>
    <div class="photoinfo-container">
      <!-- 头部区域 -->
      <h3 class="photo-title">{{ photo.title }}</h3>
      <p class="photo-subtitle">
        <span>发表时间：{{photo.add_time | dateFormat}}</span>
        <span>点击：{{photo.click}}次</span>
      </p>
      <hr />

      <!-- 缩略图区域 -->
      <!-- <div class="thumbs"> -->
      <vue-preview :slides="thumbsList" @close="handleClose"></vue-preview>
      <!-- </div> -->

      <!-- content区域 -->
      <div v-html="photo.content" class="photo-content">
        <!-- {{ photo.content }} -->
      </div>
      <comment-box :id="this.photoID"></comment-box>
    </div>
  </div>
</template>

<script>
import comment from "../subcomps/Comment.vue"; //导入评论组件

export default {
  data() {
    return {
      photoID: this.$route.params.id, // 当前图片的ID
      photo: {}, // 当前图片的对象
      thumbsList: []
    };
  },

  // 初始化（注入与校验时），根据图片ID获取当前图片对象
  created() {
    this.getPhotoInfoByPhotoId(this.photoID);
    this.getThumbsListByPhotoId(this.photoID);
  },

  // 声明评论组件
  components: {
    "comment-box": comment
  },

  methods: {
    // 根据当前图片的ID，获取当前图片的对象
    getPhotoInfoByPhotoId() {
      this.$http.get("api/getimageInfo/" + this.photoID).then(res => {
        if (res.body.status == 0) {
          this.photo = res.body.message[0];
          // console.log("Photo info loading complete");
        } else {
          Toast("Loading error...");
        }
      });
    },

    // 根据当前图片的ID，获取当前图片的缩略图数组
    getThumbsListByPhotoId() {
      this.$http.get("api/getthumimages/" + this.photoID).then(res => {
        let data = res.body;

        // 设置vue-preview的数据数组，但是版本比较老，排版的效果有待于更新
        if (data.status == 0) {
          data.message.forEach((item, i) => {
            item.w = 600;
            item.h = 400;
            item.msrc = data.message[i].src;
            item.src = data.message[i].src;
          });
          this.thumbsList = data.message;
          // console.log("ThumbsList loading complete");
        } else {
          Toast("Loading error...");
        }
      });
    },
    handleClose() {}
  }
};
</script>

<style lang="scss" scoped>
.photoinfo-container {
  padding: 3px;

  .photo-title {
    font-size: 15px;
    text-align: center;
    margin: 15px 0;
    color: #26a2ff;
  }

  .photo-subtitle {
    font-size: 13px;
    display: flex;
    justify-content: space-between;
  }
  .photo-content {
    font-size: 13px;
    line-height: 30px;
  }
}
</style>